import React, { useState } from "react";
import { MyNavBar } from "../../../components";
import { useRequest } from "ahooks";
import { Radio, RadioGroup, Toast } from "react-vant";
import style from "./style.module.scss";
import wechatImg from "../../../assets/images/icon/common resource/hdpi/common_icon_weixin_n.png";
import aliPayImg from "../../../assets/images/icon/common resource/hdpi/common_icon_zhifubao_n.png";
import checkedImg from "../../../assets/images/image/xhdpi/my_task_select.png";
import unCheckedImg from "../../../assets/images/image/xhdpi/button.png";
import { useNavigate } from "react-router-dom";
import { postRecharge } from "../../../api/wallet";

const Index: React.FC = () => {
  const navigate = useNavigate();
  // 充值金额
  const [amount, setAmount] = useState<string>("");
  // 充值方式 1微信 2支付宝
  const [method, setMethod] = useState<number>(0);
  // 充值请求hooks
  const { run } = useRequest(
    async () => {
      const data = {
        money: Number(amount),
        payType: method,
      };
      const resp = await postRecharge(data);
      return resp.result;
    },
    {
      manual: true,
      onSuccess: (res) => {
        // 请求成功执行-------
        // 请求结束  接口跑不通暂时先跳转支付成功页面
        navigate("/wallet/recharge/success", { replace: true });
      },
    }
  );
  return (
    <div className={style["main-wrapper"]}>
      <MyNavBar
        onClickLeft={() => {
          navigate(-1);
        }}
        title="充值"
        style={{ background: "#fff" }}
      ></MyNavBar>

      <div className={style["main-content"]}>
        {/* 充值信息及充值说明 */}
        <div className={style.recharge}>
          <h4 className={style["recharge-title"]}>充值金额</h4>
          <div className={style["recharge-amount"]}>
            <div className={style["amount-count"]}>
              <b className={style["amount-unit"]}>￥</b>
              <input
                type="number"
                className={style["amount-paid"]}
                value={amount}
                onInput={(e: any) => {
                  setAmount(e.target.value);
                }}
              />
            </div>
            <p className={style["amount-obtained-info"]}>
              本次可获得
              {
                <b className={style["amount-obtained"]}>
                  {Number(amount) * 100}
                </b>
              }
              H币
            </p>
          </div>
          <div className={style["payment-instruction"]}>
            最低充值1元，1元可兑换10H币
          </div>
        </div>
        {/* 充值方式 */}
        <div className={style["recharge-method"]}>
          <div className={style["method-tit"]}>选择充值方式</div>
          <RadioGroup
            onChange={(name) => {
              setMethod(name as number);
            }}
          >
            <div className={style["method-items"]}>
              <div className={style["method-items-info"]}>
                <img src={wechatImg} width={24} height={24} alt="" />
                <p>微信支付</p>
              </div>
              <div className={style["method-items-check"]}>
                <Radio
                  name={1}
                  iconSize="20px"
                  iconRender={({ checked }) => {
                    return (
                      <img
                        width="100%"
                        height="100%"
                        src={checked ? checkedImg : unCheckedImg}
                        alt=""
                      />
                    );
                  }}
                ></Radio>
              </div>
            </div>
            <div className={style["method-items"]}>
              <div className={style["method-items-info"]}>
                <img src={aliPayImg} width={24} height={24} alt="" />
                <p>支付宝支付</p>
              </div>
              <div className={style["method-items-check"]}>
                <Radio
                  name={2}
                  iconSize="20px"
                  iconRender={({ checked }) => {
                    return (
                      <img
                        width="100%"
                        height="100%"
                        src={checked ? checkedImg : unCheckedImg}
                        alt=""
                      />
                    );
                  }}
                ></Radio>
              </div>
            </div>
          </RadioGroup>
        </div>

        {/* 充值按钮 */}
        <div className={style.btn}>
          <button
            onClick={() => {
              if (!amount) {
                Toast.fail("请输入充值金额!");
                return;
              }
              if (!method) {
                Toast.fail("请选择付款方式!");
                return;
              }
              run();
            }}
          >
            充值
          </button>
        </div>
      </div>
    </div>
  );
};

export default Index;
